<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  table {
    margin: 200px auto;
    width: 400px;
    height: 200px;
    margin: 50px auto;
    border-collapse: collapse;
    text-align: center;
  }

  thead {
    background-color: rgba(57, 152, 206);
    color: white;
  }

  tr {
    border: 1px solid rgba(216, 216, 216);
    padding: 12px;
  }

  td {
    border: 1px solid rgba(216, 216, 216);
    text-align: center;
  }
</style>

<body>
  <table>
    <thead>
      <tr>
        <th><input type="checkbox" class="ckall" id="cks" checked>全选</th>
        <th>商品</th>
        <th>商家</th>
        <th>价格</th>
      </tr>
    </thead>
    <tr>
      <td><input type="checkbox" class="ck" checked></td>
      <td>小米手机</td>
      <td>小米</td>
      <td>￥1999</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="ck" checked></td>
      <td>小米净水器</td>
      <td>小米</td>
      <td>4999</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="ck" checked></td>
      <td>小米电视</td>
      <td>小米</td>
      <td>￥5999</td>
    </tr>
  </table>
  <script>
    const ck = document.querySelectorAll('.ck')
    const cks = document.querySelector('#cks')
    cks.addEventListener('click', function () {
      for (let i = 0; i < ck.length; i++) {
        // console.log(cks.checked);
        ck[i].checked = this.checked
      }
    })

    for (let i = 0; i < ck.length; i++) {
      ck[i].addEventListener('click', function () {
        cks.checked = document.querySelectorAll('.ck:checked').length === ck.length
      })
    }
  </script>
</body>

</html>